<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="../js/bianliang.js"></script>
    <script src=../js/ability.js ></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            var ang = Math.PI / 10;
            draw(350.0, 400.0, 200.0);

            function draw(x, y, r) {
                context.beginPath();
                context.moveTo(x, y - r);
                context.lineTo(x - Math.cos(ang) * r, y - Math.sin(ang) * r);
                context.lineTo(x - Math.cos(ang * 3) * r, y + Math.sin(ang * 3) * r);
                context.lineTo(x + Math.cos(ang * 3) * r, y + Math.sin(ang * 3) * r);
                context.lineTo(x + Math.cos(ang) * r, y - Math.sin(ang) * r);
                context.lineTo(x, y - r);
                context.closePath();
                context.fillStyle = "rgb(255,255,255)";
                context.fill();
                context.lineWidth = 2;
                context.strokeStyle = "black";
                context.stroke();

                context.beginPath();
                context.moveTo(x, y - r);
                context.lineTo(x, y);
                context.lineTo(x - Math.cos(ang) * r, y - Math.sin(ang) * r);
                context.moveTo(x - Math.cos(ang * 3) * r, y + Math.sin(ang * 3) * r);
                context.lineTo(x, y);
                context.lineTo(x + Math.cos(ang * 3) * r, y + Math.sin(ang * 3) * r);
                context.moveTo(x, y);
                context.lineTo(x + Math.cos(ang) * r, y - Math.sin(ang) * r);
                context.closePath();
                context.lineWidth = 1;
                context.strokeStyle = "rgb(195,195,195)";
                context.stroke();

                context.font = "30px cursive";
                context.fillStyle = "rgb(195,195,195)";
                context.fillStyle = "red";
                context.fillText("荒废度", x - 45, y - r - 20);
                context.fillText("执行能力", x - Math.cos(ang) * r - 130, y - Math.sin(ang) * r + 10);
                context.fillText("学习能力", x - Math.cos(ang * 3) * r - 60, y + Math.sin(ang * 3) * r + 40);
                context.fillText("沟通能力", x + Math.cos(ang * 3) * r - 60, y + Math.sin(ang * 3) * r + 40);
                context.fillText("信誉度", x + Math.cos(ang) * r + 10, y - Math.sin(ang) * r + 10);

            }
        });

    </script>
</head>
<body>
<canvas id="myCanvas" width="1000" height="900" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
</canvas>

</br>
班级：<select name="clazz" id="inClazz"></select>
</br>
用户名：<select name="user" id="inUser"></select>
</br>
</br>
<button id="get_shuju">查看</button>
</br>
</br>

</body>
<style>
    body {
        font-size: 30px;
        font-family: cursive;
        text-shadow: 3px 2px 2px #333;
        color: deeppink
    }
</style>

</html>